<template>
	<view style="padding-top: 20px;">
		<uni-nav-bar left-text="保存" title="我的自提地址" fixed="true" shadow="true" @clickLeft="saveZitidian()"></uni-nav-bar>
		<view class="mui-content" style="margin-top: 5px;">
			<view class="info" @click="value = true">所在省份<input type="text" v-model="sheng" placeholder="请选择   >" disabled="disabled" style="text-align: right;"/></view>
			<view class="info" @click="value = true">所在城市<input type="text" v-model="shi" placeholder="请选择   >" disabled="disabled" style="text-align: right;"/></view>
			<view class="info" @click="value = true">所在区域<input type="text" v-model="qu" placeholder="请选择   >" disabled="disabled" style="text-align: right;"/></view>
			<view class="info">负责人:<input type="text" v-model="fzr" placeholder="请输入负责人姓名" /></view>
			<view class="info">自提点名称:<input type="text" v-model="ztdName" placeholder="给你的自提点取一个响亮的名称吧" /></view>
			<view class="info">联系号码:<input type="text" v-model="phone" placeholder="此手机号码为app登录账号" /></view>
			<view class="info">登录密码:<input type="text" v-model="password" placeholder="请输入app登录密码" /></view>
			<view style="background-color: white;font-size: 12px;padding-top: 10px;"><textarea type="text" v-model="detailAddress" placeholder="自提点详细地址" style="padding-left: 10px;height: 77px;width: 90%;"></textarea></view>
		</view>
		<!-- 城市弹出层 -->
		<view class="u-demo-area">
			<city-select v-model="value" @city-change="cityChange"></city-select>
		</view>
	</view>
</template>

<script>
	import citySelect from './ucitySelectPP.vue';
	import amap from '../../utils/amap-wx.130.js';// 高德小程序插件  
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				ppid:'',			//品牌ID
				sheng:'',			//省份
				shi:'',				//城市
				qu:'',				//区域街道
				fzr:'',				//负责人
				ztdName:'',			//自提点名称
				phone:'',			//联系号码
				password:'',		//登录密码
				detailAddress:'',	//详细地址
				jingdu:'',			//经度
				weidu:'',			//纬度
				
				value: false,
				value1: 1,
				value2: 1,
				value3: 1,
				options1: [],	//省份集合
				options2: [],	//城市集合
				options3: [],	//区县集合
				key: '2f7f27be426ba68483764cd2e9f2c968',
				
				adId:'',		//自提地址ID
			}
		},
		onLoad(opt) {
			this.ppid = opt.ppid;
			this.adId = opt.adId;
			this.getJingWeidu()
			if(!this.isNull(opt.adId)){
				this.adId = opt.adId;
				this.fzr = opt.name;
				this.ztdName = opt.zitiName;
				this.phone = opt.phone;
				this.password = opt.password;
				let zitiDetail = opt.zitiDetail;
				this.sheng = zitiDetail.split("-")[0];
				this.shi = zitiDetail.split("-")[1];
				let quDetail = zitiDetail.split("-")[2];
				console.log(quDetail)
				let x = quDetail.indexOf(" ");
				this.qu = quDetail.substr(0,x);
				this.detailAddress = quDetail.substr(x+1,quDetail.length);
			}
		},
		methods: {
			//监听自定义导航栏保存按钮
			// onNavigationBarButtonTap(e) { 
			saveZitidian(){
				// console.log("省份："+this.sheng+" 城市："+this.shi+" 街道："+this.qu+" 负责人："+this.fzr+" 自提点名称："+this.ztdName+" 联系号码："+this.phone+" 登录密码："+this.password+" 详细地址："+this.detailAddress+" 经度："+this.jingdu+" 纬度："+this.weidu)
				// var reg=/^1[3|4|5|7|8|9][0-9]\d{8}$/;//验证手机号码格式
				var reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
				if(this.isNull(this.sheng)){
					this.$u.toast("请先选择省份")
					return
				}
				if(this.isNull(this.shi)){
					this.$u.toast("请先选择城市")
					return
				}
				if(this.isNull(this.qu)){
					this.$u.toast("请先选择区域")
					return
				}
				if(this.isNull(this.fzr)){
					this.$u.toast("负责人不能为空")
					return
				}
				if(this.isNull(this.ztdName)){
					this.$u.toast("自提点名称不能为空")
					return
				}
				if(this.isNull(this.phone)){
					this.$u.toast("联系号码不能为空")
					return
				}
				if(!reg.test(this.phone)){
					this.$u.toast("联系号码格式不对")
					return
				}
				if(this.isNull(this.password)){
					this.$u.toast("登录密码不能为空")
					return
				}
				if(this.isNull(this.detailAddress)){
					this.$u.toast("请输入详细地址")
					return
				}
				if(!this.isNull(this.adId)){//编辑自提点地址
					uni.request({
						header:{'Content-Type':'application/json'},
						url:this.host+'/ppZitidian/gzhUpdateZitidianxcx',
						method:'POST',
						data:{
							zitiId:this.adId,
							userId:uni.getStorageSync('usersId'),
							zitiName:this.ztdName,
							password:this.password,
							name:this.fzr,
							phone:this.phone,
							zitiDetail:this.detailAddress,
							ppId:this.ppid,
							jingdu:this.jingdu,
							weidu:this.weidu,
							place:this.sheng+'-'+this.shi+'-'+this.qu
						},
						success: (res) => {
							if(res.data.code==200){
								this.$u.toast("自提地址修改成功")
								setTimeout(() => {
									uni.navigateTo({
										url:'center'
									})
								},500)
							}else{
								this.$u.toast(res.data.msg)
							}
						}
					})
				}else{//新增自提点地址
					uni.request({
						header:{'Content-Type':'application/json'},
						url:this.host+'/ppZitidian/gzhAddZitidianxcx',
						method:'POST',
						data:{
							userId:uni.getStorageSync('usersId'),
							zitiName:this.ztdName,
							password:this.password,
							name:this.fzr,
							phone:this.phone,
							zitiDetail:this.detailAddress,
							ppId:this.ppid,
							jingdu:this.jingdu,
							weidu:this.weidu,
							place:this.sheng+'-'+this.shi+'-'+this.qu
						},
						success: (res) => {
							if(res.data.code==200){
								this.$u.toast("自提地址保存成功")
								setTimeout(() => {
									uni.navigateBack({
										
									})
								},500)
							}else{
								this.$u.toast("保存失败")
							}
						}
					})
				}
			},
			//选择地址
			cityChange(e) {
				// console.log("省份："+e.province.label+" 城市："+e.city.label+" 区县："+e.area.label)
				if(e.province.label != undefined){
					this.sheng=e.province.label;
				}
				if(e.city.label != undefined){
					this.shi=e.city.label;
				}
				if(e.area.label != undefined){
					this.qu=e.area.label;
				}
			},
			//得用户当前位置的经纬度
			getJingWeidu(){
				//使用高度插件定位
				this.amapPlugin = new amap.AMapWX({  	// 初始化高德插件
					key: this.key  
				}); 
				this.amapPlugin.getRegeo({  
					success: (data) => {
						let jingweidu = data[0].regeocodeData.addressComponent.streetNumber.location;
						// console.log("经纬度:"+jingweidu)
						// console.log("经度："+jingweidu.substr(0,jingweidu.indexOf(',')))
						// console.log("纬度："+jingweidu.substr(jingweidu.indexOf(',')+1,jingweidu.length))
						this.jingdu = jingweidu.substr(0,jingweidu.indexOf(','));
						this.weidu = jingweidu.substr(jingweidu.indexOf(',')+1,jingweidu.length);
						this.sheng = data[0].regeocodeData.addressComponent.province;
						this.shi = data[0].regeocodeData.addressComponent.city;
						this.qu = data[0].regeocodeData.addressComponent.district;
					}  
				});   
			},
			//判断为空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
    .nav-header h1 {
        text-align: left;
    }
    .nav-header a {
        color: white;
    }
    .info{
        height:50px;
        font-size: 14px;
        line-height: 50px;
        border-bottom: 1px solid #f6f6f6;
        background-color: #fff;
        padding-left:10px;
		display: flex;
		justify-content: space-between;
    }
    .info input{
        width: 70%;
        float: right;
        height: 50px;
        font-size: 14px;
        margin: 0;
        padding: 0 15px 0 0;
        border: 0;
        border-bottom: 1px solid #f6f6f6;
    }
    #hideDiv{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 998;
        background-color: rgba(0,0,0,.3);
        display:none;
    }
</style>
